<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todos</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <section class="todoapp" v-cloak>
        <div>
            <header class="header" >
                <h1>todos</h1>
                <input 
                    class="new-todo" 
                    placeholder="请输入内容" 
                    @keyup.13 = 'addTodo'
                    v-model='title'
                />
            </header>
            <section class="main" v-show="list.length">
                <input 
                    class="toggle-all" 
                    v-model='isCheckedAll' 
                    type="checkbox" 
                />
                <ul class="todo-list">
                    <li 
                        :class="{completed: item.checked,editing: index === editTodoIndex}" 
                        class="" 
                        v-for="item,index in list"
                    >
                        <div class="view">
                            <input 
                                class="toggle" 
                                type="checkbox" 
                                v-model="item.checked"
                            />
                            <label @dblclick="editTodo(index)">{{item.title}}</label>
                            <button 
                                class="destroy" 
                                @click="removeTodo(index)"
                            ></button>
                        </div>
                        <input class="edit" v-model='item.title' />
                    </li>
                </ul>
            </section>
            <footer class="footer" v-show="list.length">
	            <span class="todo-count">
	            	<strong>0</strong>
	            	<span>条未选中</span>
	            </span>
	            <ul class="filters">
	            	<li><a href="#/all" class="selected">All</a></li> 
	            	<li><a href="#/active" class="">Active</a></li> 
	            	<li><a href="#/completed" class="">Completed</a></li>
	           	</ul>
            </footer>
        </div>
    </section>
</body>
<script src="../src/vue.js"></script>
<script>
    
    let data = [
        {
            title:'假数据',
            id: Date.now()+Math.random(),
            checked: true
        },
        {
            title:'假数据',
            id: Date.now()+Math.random(),
            checked: true
        }
    ]

    new Vue({
        el: '.todoapp',
        data: {
            list: data,
            title: '',
            editTodoIndex: -1
        },
        computed: {
            isCheckedAll: {
                get(){
                    return this.list.every(item => item.checked)
                },
                set(newValue){
                    this.list.forEach(item => item.checked = newValue)
                }
            }
        },
        methods: {
            // 添加
            addTodo () {
               this.list.push({
                title: this.title,
                id: Date.now(),
                checked: false
               }) 

               this.title = '';
            },
            // 删除
            removeTodo(index){
                this.list.splice(index,1)
            },
            // 编辑
            editTodo (index) {
                // 重新渲染视图的
                this.editTodoIndex = index;

                // 视图渲染结束之后，获取焦点

                // 视图更新后触发回调
                // 异步更新
                this.$nextTick(function (){
                    document.querySelectorAll('.edit')[index].focus()   
                })

                
            }
        }
    })

</script>

</html>
